<template>
	<view class="bgc-mine">
		<view class="bgc-mine-img" @click="upImg">
			<image :src="bgcMineData" mode="widthFix"></image>
		</view>
		<view class="">
			<u-popup v-model="showUpImg" mode="bottom" :closeable="true" >
					<view class="picInput-content" @click="chooseImg">
						<image :src="smallImg" mode="widthFix"></image>
					</view>
				<u-button>选择图片</u-button>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			bgcMineData:String,
		},
		data() {
			return {
				showUpImg:false,
				smallImg:"https://tse1-mm.cn.bing.net/th/id/R-C.d3669c0f132f1aa615ab838cb97e7196?rik=Zr5dZIFLkFVEvQ&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f37%2f77%2f43573c60704e423.jpg&ehk=0c5kqSczQ%2bO0zgeOxPMXgIC%2bXOWeNd%2bDtFSi2M7AWDQ%3d&risl=&pid=ImgRaw&r=0"
			}
		},
		methods:{
			upImg(){
				this.showUpImg = true
			},
			chooseImg(){
				uni.chooseImage({
					count:1,
					sizeType:['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.showUpImg = false
						let imgMsg = {}
						imgMsg.type = res.tempFiles[0].type.split("/")[1]
						uni.request({
							url:res.tempFilePaths[0],
							responseType:"arraybuffer",
							success: (e) => {
								let base64Img = uni.arrayBufferToBase64(e.data)
								imgMsg.coding=base64Img
								this.$emit("commitBgc",imgMsg)
							}
						})	
					}
				})
			}
		}
	}
</script>

<style scoped>
	.bgc-mine{
		width: 100%;
	}
	.bgc-mine-img>image{
		width: 100%;
		max-height: 400rpx;
	}
	.picInput-content{
		width: 200rpx;
		height: 200rpx;
		border:1rpx solid #999999 ;
		margin:30rpx auto ;
	}
	.picInput-content>image{
		width: 100%;
		max-height: 200rpx;
		z-index: -99;
	}
</style>
